<%- include header%>

<div class="pub_tra" style="">
	<div class="col-lg-12" style="background: #16A085; height: 380px;">
		<div class="col-lg-12" style="margin:0px 0px 0px 7%; ">
			<div class="col-lg-3 col-md-3 col-sm-3" style="background: white;
				padding:1px 0px 0px 8px;height: 380px;border: 1px solid #EEEEEE;">
				<img src="/images/plane1.png" style="margin:40px 15%;" />
				<a href="/to_pub_tra" class="btn btn-success" style="margin-left: 18%; width: 180px;
					 margin-top: -120px; z-index: 9999;">
				<i class="glyphicon glyphicon-send" style="margin-right: 10px;"></i>分享我的旅途
			</a>
			</div>

			<div class="col-lg-9 col-md-7 col-sm-7" style="padding: 0">
				<div id="myCarousel" class="carousel slide">
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>
					<!-- Carousel items -->
					<div class="carousel-inner">
						<div class="active item">
							<img src="/images/sea1.jpg" />
							<div class="carousel-caption" 
								>
								<h3 style="margin: 0;">浮天沧海远,去世法舟轻</h3>

							</div>
						</div>
						<div class="item"><img src="/images/sea2.jpg" />
						<div class="carousel-caption">
								<h3 style="margin: 0;">秦川朝望迥,日出正东峰</h3>

							</div>
						</div>
						<div class="item"><img src="/images/sea3.jpg" />
						<div class="carousel-caption">
								<h3 style="margin: 0;">余霞散成绮,澄江静如练</h3>

							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<div class="container">

		<h4 style="margin-top: 15px; padding-bottom: 0px;"><a href="/archive" style="color: #16A085">
			<img src="/images/Golden.png" /> 最新游记</a>
			<a href="/gethot" style="color: #16A085">
				<img src="/images/Golden.png" /> 最热游记</a>
			<hr />
		</h4>
		
		<div class="col-lg-9 col-sm-10 col-md-10 col-sm-10 post" style="height: auto;" id="show">
			<% posts.forEach(function(post,index){%>
			<div class="col-lg-10 col-sm-10 col-md-10 col-sm-10 post_contenta" style="padding: 20px 0px; border-bottom: 1px dashed #CECECE; height:auto;">

				<div class="col-lg-5 col-sm-5 col-md-5 col-sm-5 postimg" style="padding: 0;">
					<div style="background: url(/images/<%= post.area%>.jpg) center; height: 180px;"></div>
				</div>

				<div class="col-lg-7 col-sm-7 col-md-7 col-sm-7 post_all" style="padding-right: 0;">
					<h4  class="" style="margin-top:-4px;font-size: 20px; font-weight:600;">
					<img src="/images/medal.png" style="margin-top:-4px;"/>
					<a class="text-success "
						href="/u/<%= post.name%>/<%= post.time.day%>/<%= post.title%>/<%= post.area%>"
						 target="_blank">
					<%= post.title%>
				</a></h4>
					<p class="info">

						作者：
						<a href="/u/<%= post.name%>">
							<%= post.name%>
						</a>
						<%= post.time.minute%>

					</p>
					<h5 style="min-height:50px;max-height:79px;overflow: hidden;text-overflow:ellipsis;" class=""><%- post.post%></h5>
					<p style=" word-spacing: 3px;height: 20px;">
						<img src="images/eye.png" style="height: 12px;width: 20px;margin-top: -3px;" />
						<%if(post.pv){%>
						<%= post.pv%>
						<%}else{%> 0
						<%}%> &nbsp;
						<img src="/images/comments.png" />
						<%if(post.comments){%>
						<%= post.comments.length%>
						<%}else{%> 0
						<%}%>
					</p>
				</div>
			</div>

			<%})%>

		</div>
		<div class="col-lg-3 col-sm-2 col-md-2 col-sm-2" style="left:0%; height: 700px;">
			<a class="thumbnail " href="# ">
				<img src="/images/guilin.jpg" />
			</a>
			<a class="thumbnail " href="# ">
				<img src="/images/changcheng.jpg" />
			</a>
		</div>
	</div>
</div>
<%- include stick%>
<%- include footer%>
<link rel="stylesheet" href="/stylesheets/pub_tra.css" />
<script type="text/javascript" src="/javascripts/new_ajax.js" ></script>
<script type="text/javascript" src="/javascripts/waterfall.js" ></script>
<style>
	.container h3:first-child {
		margin-left: 30%;
		color: #4682B4;
		font-family: '楷体';
		font-size: 35px;
		font-weight: bold;
	}
	
	.container h4:first-child {
		font-size: 15px;
	}
	
	.container>h4>a {
		margin-left: 2%;
		padding-right: 20px;
	}
	
	#show>button {
		float: right;
		border: none;
		color: steelblue;
		background: none;
	}
	
	#show {
		color: #7A7F7F
	}
	
	pre {
		border: none;
		background: none;
		font-size: 14px;
		line-height: 1.42857;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #333;
	}
	
	#show div {
		height: 210px;
		overflow: hidden;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	
	.info a {
		width: 100%;
		color: #16A085;
		margin-right: 10%;
	}
	
	#show img:nth-child(2) {
		width: 15px;
		height: 13px;
		margin-top: -1px;
	}
	
	#myCarousel {
		padding: 0;
	}
	
	.carousel-inner div {
		width: 800px;
		height: 380px;
	}
	
	.carousel-caption {
		background: rgba(0, 0, 0, 0.5);
		height: 50px;
		margin-top: 330px;
		padding: 10px 0px;
		margin-left: -65px;
		line-height: 50px;
	}
	.carousel-indicators{
		left: 41%;
	}
	.post_contenta{
		padding: 20px 0px; border-bottom: 1px dashed #CECECE; height:auto;
	}
</style>